<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>基本选择器(simple selector)</title>

        <style type="text/css">

            /* type selector ( 标签选择器 / 标记选择器 / 元素名称选择器 )*/
            body { border : 10px solid green ; }

            /* attribute selector (属性选择器) 之 [attributeName]*/
            [class] {
                border: 10px solid blue ;
                height: 50px ;
                text-align: center ;
            }

            /* 只要某个 元素(element) 显式指定了 id 属性(attribute) 那就选择该元素 */
            [id] {
                border: 10px solid red ;
                height: 30px ;
                text-align: center ;
                font-weight: bolder ;
            }

            /* [name=value] 选择既拥有指定名称(name)的属性且该属性值【等于】指定值(value)的元素 */
            [class=odd] {
                background-color: #ffff00;
            }

            /* [name~=value] 选择既拥有指定名称(name)的属性且该属性值中【包含】指定单词(value)的元素 */
            [class~=power] {
                color : #0000FF ; /* 修改元素内部的文本颜色 */
                font-family: 思源宋体 ; /* 指定 字体 */
            }

            /* [name|=value] 用于选取带有以指定值开头的属性值的元素 ( 比如 id="fourth-element" ) */
            [id|=fourth] {
                background-color: #dfdfdf ;
            }

            /* [name^=value] 用于选取属性值以指定值开头的每个元素 ( 比如 id="fifth-element" ) */
            [id^=fif] {
                background-color: #3b84f1 ;
            }
            
            /* [name$=value] 用于选取属性值以指定值结尾的每个元素 ( 比如 id="fourth-element" 、id="fifth-element" ) */
            [id$=ment] {
                font-size: 30px;
                height: 50px ;
            }

            /* [name*="value"] 选择器匹配属性值包含指定值的每个元素 ( 比如 id="fourth-element" 、id="fifth-element" ) */
            [id*="-"] {
                text-align: right ;
            }

        </style>

    </head>
    <body>

        <h3>属性选择器 (attribute selector) </h3>

        <div class="odd">第一个元素</div>

        <div class="even power" id="second">第二个元素</div>

        <div class="odd power" id="third">第三个元素</div>

        <div id="fourth-element">第四个元素</div>

        <div id="fifth-element">第五个元素</div>
        
    </body>
</html>